<template>
    <div>
        <fieldset> 
            <legend><h3>销售信息配置</h3></legend>
        <div>
            sku：<el-input style="width:200px;" v-model="search.sku" />
            系统：<el-select v-model="search.systemcode">
                        <el-option
                        v-for="item in search.options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                        </el-option>
                    </el-select>
                    <el-button @click="searchData">查询</el-button>
                    <el-button type="success" @click="opendilog">新增</el-button>
            <el-table  border  
					:data="content"
					stripe
					style="width: 100%" id="celltable">
					<el-table-column prop="sku" label="SKU" align="center"> </el-table-column>
					<el-table-column prop="sdate" label="开始日期" align="center">  </el-table-column>
					<el-table-column prop="edate" label="截止日期" align="center">  </el-table-column>
                    <el-table-column prop="systemcode" label="系统类型" align="center">  </el-table-column>
					<el-table-column prop="status" label="状态" width="100px;" align="left">
                        <template scope="scope">
							<span v-if="scope.row.status == '1'">启用</span>
                            <span v-if="scope.row.status == '0'">失效</span>
						</template>
					</el-table-column>
					<el-table-column prop="salenumber" label="数量" align="center"> </el-table-column>
					<el-table-column label="操作" width="230px;" align="left">
						<template scope="scope">
							<el-button size="mini" @click="update(scope.row.id,scope.row.sku,scope.row.sdate,scope.row.edate,scope.row.systemcode,scope.row.status,scope.row.salenumber)">修改</el-button>
						</template>
					</el-table-column>
			</el-table>
			<el-pagination background
					@size-change="handleSizeChange"
					@current-change="handleCurrentChange"
					:current-page="pageNo"
					:page-sizes="[10, 20, 50, 100]"
					:page-size="pageSize"
					layout="total, sizes, prev, pager, next, jumper"
					:total="total">
			</el-pagination>
        </div>
        </fieldset>

        <el-dialog
                title="产品管理"
                :visible.sync="dialog.dialogProductVisible"
                width="30%">
                <table>
                    <tr>
                        <td>id：</td><td>  <input type="text" style="width:300px;"  v-model="productno.id" disabled=true> </td>
                    </tr>
                    <tr>
                        <td>sku：</td><td> 
                            <el-select v-model="productno.sku">
                                <el-option 
                                v-for="item in kzsale.skuoptions"
                                v-show="item.status == 1"
                                :key="item.sku"
                                :label="item.title"
                                :value="item.sku">
                                </el-option>
                            </el-select>    
                         </td>
                    </tr>
                    <tr>
                        <td>开始日期：</td><td>  <input type="text" style="width:300px;"  v-model="productno.sdate"> </td>
                    </tr>
                    <tr>
                        <td>截止日期：</td><td> <input type="text" style="width:300px;" v-model="productno.edate" > </td>
                    </tr>
                    <tr>
                        <td>系统类型：</td><td> <select style="width:300px;" v-model="productno.systemcode" >
                                <option value="PERSONAL">个人</option>
                                <option value="COMPANY">企业</option>
                                <option value="STUDENT">学生</option>
                            </select> </td>
                    </tr>
                    <tr>
                        <td>状态：</td><td> <select style="width:300px;" v-model="productno.status" >
                                <option value="1">启用</option>
                                <option value="0">失效</option>
                            </select> </td>
                    </tr>
                    <tr>
                        <td>数量：</td><td> <input type="text" style="width:300px;" v-model="productno.salenumber" > </td>
                    </tr>
                </table>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="dialog.dialogProductVisible = false">取 消</el-button>
                    <el-button type="primary" @click="dooperation">确 定</el-button>
                </span>
            </el-dialog>
    </div>
</template>

<script>
    import  {salepage,operationNumber} from '@/api/kz/kznumber.js'
    import  {getAllProducts} from '@/api/kz/kzapi.js'
    export default {
        data(){
            return {
                search:{
                    sku : "",
                    systemcode: "",
                    options: [
                            {
                                value: '',
                                label: '全部'
                            }, 
                            {
                                value: 'PERSONAL',
                                label: '个人口罩'
                            }, 
                            {
                                value: 'COMPANY',
                                label: '企业口罩'
                            }, 
                            {
                                value: 'STUDENT',
                                label: '学生口罩'
                            }
                        ],
                },
                productno: {
                    id:"",
                    sku :"",
                    sdate:"",
                    edate:"",
                    systemcode:"",
                    status:"",
                    salenumber:""
                },
                kzsale:{
                    skuoptions: [
                            
                        ]
                },
                dialog:{dialogProductVisible:false},
                content : [],
                pageNo: 0,
                pageSize:10,
                total : 0,  
            }
        },
        mounted(){
            this.searchData();
            getAllProducts().then((response)=>{
                    this.kzsale.skuoptions = response.data ;
                }).catch((error)=>{
                    console.log(error);
                })
        },
        methods:{
            searchData : function(){
				this.fetchData(0,10);
			},
			handleSizeChange: function (size) {
		        this.pageSize = size;
		        this.fetchData(this.pageNo , size );
		    },
		    handleCurrentChange: function(pageNo){
                // console.log(pageNo)
		        this.pageNo = pageNo;
		        this.fetchData(pageNo,this.pageSize);
		    },
		    fetchData: function(pageNo,pageSize){
		    	var _this = this ;
		    	var data= {
		    		pageNo : pageNo ,
                    pageSize : pageSize ,
                    sku         :_this.search.sku ,
                    systemcode  :_this.search.systemcode
		    	};
		    	salepage(data).then((response)=>{
                   	this.$set(this,"content",response.data.content);
					this.$set(this,"total",response.data.total);
                }).catch((error)=>{
                    console.log(error);
                })
            },
            opendilog(){
                this.dialog.dialogProductVisible =true;
                this.productno.id="";
                this.productno.sku="";
                this.productno.sdate="";
                this.productno.edate="";
                this.productno.systemcode="";
                this.productno.status="";
                this.productno.salenumber="";
            },
            dooperation(){
                operationNumber(this.productno).then((response)=>{
                    this.fetchData(0,10);
                    this.dialog.dialogProductVisible = false;
                }).catch((error)=>{
                    console.log(error);
                })
            },
            update(id,sku,sdate,edate,systemcode,status,salenumber){
                this.dialog.dialogProductVisible =true;
                this.productno.id=id;
                this.productno.sku=sku;
                this.productno.sdate=sdate;
                this.productno.edate=edate;
                this.productno.systemcode=systemcode;
                this.productno.status=status;
                this.productno.salenumber=salenumber;
            }
        }
    }
</script>